<template>
	<div class="addshop">
	<div class="modal-backdrop" @click="close">
		<div class="modal" @click.stop>
			<div class="modal-header header">
				<slot name="header" class="header">
					<h3 class="title">申请店铺</h3>
					<div class="close" @click="close">x</div>
				</slot>
			</div>
			<div class="modal-body">
				<slot name="body">
					<form class="form">
						<div class="information">
							<label class="name">店铺名</label>
							<input type="text" v-model="name" />
						</div>
						<div class="information">
							<label class="name">地址</label>
							<input type="text" v-model="address" />
						</div>
					</form>
				</slot>
			</div>
			<div class="modal-footer">
				<slot name="footer">
					<div class="submit" @click="submit">保存</div>
				</slot>
			</div>
		</div>
	</div>
</div>
</template>

<script>
export default {
	name: 'addshop',
	data() {
		return {
			name:'',
			address:'',
		}
	},
	mounted() {

	},
	methods: {
		//提交
		submit() {
			if(this.name == null || this.name == ""){
				this.$messagebox.alert("店铺名不能为空！")
				return false;
			}
			if(this.address == null || this.address == ""){
				this.$messagebox.alert('地址不能为空！')
				return false;
			}			
			this.$http.post(this.$store.state.reqUrl + '/shops/info', {
				shopName: this.name,
				detailAddress: this.address,
			}).then(res => {
				this.$emit('close',false);
				this.name = "";
				this.address = "";
				this.$toast({
					message:res.data,
					duration:8000
				})
			}).catch(res => {
				this.$toast(res.response.data)
			})
		},//关闭模态框
		close() {
			this.$emit('close',false);
		}
	},
}
</script>

<style scoped>
	 .modal-backdrop {
	 	position: fixed;
	 	top: 0;
	 	right: 0;
	 	bottom: 0;
	 	left: 0;
	 	background-color: rgba(0, 0, 0, .3);
	 	display: flex;
	 	justify-content: center;
	 	align-items: center;
	 }
	 
	 .modal {
	 	background-color: #fff;
	 	box-shadow: 2px 2px 20px 1px;
	 	overflow: hidden;
	 	overflow-x: auto;
	 	display: flex;
	 	flex-direction: column;
	 	width: 100%;
	 	position: absolute;
	 	border-radius: 20px;
	 }
	 
	 .modal-header {
	 	display: flex;
	 	width: 100%;
	 	height: 100px;	 	
	 	font-size: 30px;
	 	background: #FFFFFF;
	 	border-bottom: 1px solid groove !important;
	 }
     .header{
     	border-bottom: 1px solid gainsboro;
     }    
	 .title {
	 	flex: 1;
	 	text-align: center;
	 	line-height: 100px;
	 }
	 
	 .close {
	 	position: absolute;
	 	width: 40px;
	 	text-align: center;
	 	height: 40px;
	 	right:35px;
	 	font-size: 44px;
	 	color: dimgrey;
	 	line-height: 100px;
	 }
	  .modal-body{
     	margin: 40px 0;
     	font-size: 28px;
     }
	 .form {
	 	line-height: 1.5rem;
	 	background: #FFFFFF;
	 	width: 100%;
	 }
	 
	 .information {
	 	margin-bottom: 30px;
	 	width: 100%;
	 	display: flex;
	 }
	 
	 .name {
	 	text-align: center;
	 	width: 100px;
	 	line-height: 60px;
	 }
	 
	 input {
	 	flex: 1;
	 	height: 80px;
	 	border: 1px solid gainsboro;
	 	margin: 0 20px 0 20px;
	 }
	 .modal-footer{
	 	height: 100px;
	 	border-top: 1px solid gainsboro;
	 }
	 .submit{
	 	float: right;
	 	height: 80px;
	 	width: 200px;
	 	background: #66CDAA;
	 	color: #FFFFFF;
	 	text-align: center;
	 	line-height: 82px;
	 	margin-top:10px;
	 	margin-right: 20px;
	 	font-size: 28px;
	 }
</style>